<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>智慧校园学生管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="main.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f8fa;
            color: #2a2a2a;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航栏 */
        header {
            background: linear-gradient(135deg, #4D89FF, #2a5bd7);
            color: white;
            padding: 15px 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 22px;
            font-weight: bold;
        }

        .logo i {
            font-size: 28px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .notification-badge {
            position: relative;
            cursor: pointer;
        }

        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ff4757;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 主内容区 */
        .main-container {
            flex: 1;
            max-width: 1400px;
            margin: 30px auto;
            padding: 0 20px;
            width: 100%;
        }

        /* 数据概览卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }

        .stat-content {
            flex: 1;
        }

        .stat-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }

        /* 功能卡片区 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            padding: 25px;
            transition: all 0.3s ease;
            cursor: pointer;
            border-left: 4px solid #4D89FF;
        }

        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }

        .card h3 {
            margin-bottom: 10px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card h3 i {
            color: #4D89FF;
        }

        .card p {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        /* 底部信息区 */
        .info-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        @media (max-width: 768px) {
            .info-container {
                grid-template-columns: 1fr;
            }
        }

        .info-box {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            padding: 20px;
        }

        .info-box h3 {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: #4D89FF;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .todo-item, .notice-item {
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .todo-item:last-child, .notice-item:last-child {
            border-bottom: none;
        }

        .todo-content, .notice-content {
            flex: 1;
        }

        .todo-title, .notice-title {
            font-weight: 500;
            margin-bottom: 3px;
        }

        .todo-desc, .notice-date {
            font-size: 12px;
            color: #888;
        }

        .todo-action {
            background-color: #4D89FF;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
        }

        /* 新增学生模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 25px;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .modal-header h2 {
            color: #4D89FF;
            margin: 0;
        }

        .close-btn {
            font-size: 24px;
            cursor: pointer;
            color: #888;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .btn-primary {
            background-color: #4D89FF;
            color: white;
            border: none;
        }

        .btn-secondary {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #ddd;
        }

        /* 页脚 */
        .footer {
            text-align: center;
            padding: 20px;
            color: #888;
            font-size: 14px;
            background-color: white;
            border-top: 1px solid #eee;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 15px;
                padding: 15px;
            }

            .user-info {
                width: 100%;
                justify-content: flex-end;
            }
        }
    </style>
</head>
<body>

<div class="main-container">
    <!-- 数据概览区 -->
    <div class="stats-container" id="statsContainer">
        <div class="stat-card">
            <div class="stat-icon" style="background-color: #4D89FF;">
                <i class="bi bi-people-fill"></i>
            </div>
            <div class="stat-content">
                <div class="stat-title">在校学生总数</div>
                <div class="stat-value" id="studentCount">1,024</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon" style="background-color: #2ecc71;">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div class="stat-content">
                <div class="stat-title">今日到校率</div>
                <div class="stat-value" id="attendanceRate">98.5%</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon" style="background-color: #e74c3c;">
                <i class="bi bi-exclamation-triangle-fill"></i>
            </div>
            <div class="stat-content">
                <div class="stat-title">待处理事务</div>
                <div class="stat-value" id="pendingTasks">5</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon" style="background-color: #f39c12;">
                <i class="bi bi-calendar-event-fill"></i>
            </div>
            <div class="stat-content">
                <div class="stat-title">近期活动</div>
                <div class="stat-value" id="upcomingEvents">2</div>
            </div>
        </div>
    </div>

    <!-- 快捷功能入口 -->
    <h2 style="margin-bottom: 15px; color: #333; display: flex; align-items: center; gap: 10px;">
        <i class="bi bi-lightning-fill" style="color: #f39c12;"></i>
        <span>快捷操作</span>
    </h2>
    <div class="card-grid" id="quickActions">
        <div class="card" onclick="showAddStudentModal()">
            <h3><i class="bi bi-person-plus"></i> 新增学生</h3>
            <p>录入新学生的基本信息，分配班级和学号</p>
        </div>
        <div class="card" onclick="goTo('attendance/record.html')">
            <h3><i class="bi bi-clipboard-check"></i> 考勤记录</h3>
            <p>记录学生每日出勤情况，查看考勤统计</p>
        </div>
        <div class="card" onclick="goTo('grade/input.html')">
            <h3><i class="bi bi-journal-text"></i> 成绩录入</h3>
            <p>录入学生考试成绩，生成成绩分析报告</p>
        </div>
        <div class="card" onclick="goTo('report/generate.html')">
            <h3><i class="bi bi-file-earmark-text"></i> 报表生成</h3>
            <p>生成各类统计报表，支持导出和打印</p>
        </div>
    </div>

    <!-- 主功能菜单 -->
    <h2 style="margin-bottom: 15px; color: #333; display: flex; align-items: center; gap: 10px;">
        <i class="bi bi-grid-fill" style="color: #4D89FF;"></i>
        <span>功能菜单</span>
    </h2>
    <div class="card-grid" id="menuGrid">
        <!-- 菜单卡片将动态插入这里 -->
    </div>

    <!-- 待办事项和公告 -->
    <div class="info-container">
        <div class="info-box">
            <h3><i class="bi bi-list-check"></i> 待办事项</h3>
            <div id="todoList">
                <div class="todo-item">
                    <div class="todo-content">
                        <div class="todo-title">张三的转班申请</div>
                        <div class="todo-desc">申请从1班转到2班</div>
                    </div>
                    <button class="todo-action">处理</button>
                </div>
                <div class="todo-item">
                    <div class="todo-content">
                        <div class="todo-title">李四的请假审批</div>
                        <div class="todo-desc">病假3天，需家长确认</div>
                    </div>
                    <button class="todo-action">审批</button>
                </div>
            </div>
        </div>
        <div class="info-box">
            <h3><i class="bi bi-megaphone-fill"></i> 最新公告</h3>
            <div id="noticeList">
                <div class="notice-item">
                    <div class="notice-content">
                        <div class="notice-title">期中考试时间安排</div>
                        <div class="notice-date">2025-05-10</div>
                    </div>
                </div>
                <div class="notice-item">
                    <div class="notice-content">
                        <div class="notice-title">家长会通知</div>
                        <div class="notice-date">2025-05-15</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新增学生模态框 -->
<div id="addStudentModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="bi bi-person-plus"></i> 新增学生</h2>
            <span class="close-btn" onclick="closeModal()">&times;</span>
        </div>
        <form id="studentForm">
            <div class="form-group">
                <label for="studentNo">学号</label>
                <input type="text" id="studentNo" name="studentNo" required>
            </div>
            <div class="form-group">
                <label for="studentName">姓名</label>
                <input type="text" id="studentName" name="studentName" required>
            </div>
            <div class="form-group">
                <label for="gender">性别</label>
                <select id="gender" name="gender" required>
                    <option value="">请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="className">班级</label>
                <input type="text" id="className" name="className" required>
            </div>
            <div class="form-group">
                <label for="phone">联系电话</label>
                <input type="tel" id="phone" name="phone">
            </div>
            <div class="form-group">
                <label for="address">家庭住址</label>
                <input type="text" id="address" name="address">
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitStudentForm()">提交</button>
            </div>
        </form>
    </div>
</div>

<div class="footer">
    &copy; 2025 智慧校园学生管理系统 版权所有 | 版本 v2.1.0
</div>

<script src="Js/jquery.min.3.6.0.js"></script>
<script>
    $(document).ready(function () {
        // 检查登录状态
        const roleId = localStorage.getItem('roleId');
        const userName = localStorage.getItem('userName') || '用户';

        if (!roleId) {
            alert('未登录或登录信息已失效');
            window.location.href = 'login.html';
            return;
        }

        // 设置用户信息
        $('#userAvatar').attr('title', `${userName} (${getRoleName(roleId)})`);

        // 根据角色调整界面
        adjustUIByRole(roleId);

        // 加载菜单
        loadMenus(roleId);

        // 加载统计数据
        loadStatistics(roleId);
    });

    function getRoleName(roleId) {
        const roles = {
            "1": "管理员",
            "2": "教师",
            "3": "学生"
        };
        return roles[roleId] || "用户";
    }

    function adjustUIByRole(roleId) {
        // 根据角色隐藏/显示特定元素
        if (roleId === "3") { // 学生角色
            $('#quickActions').hide();
            $('.stat-card:nth-child(2), .stat-card:nth-child(3)').hide(); // 隐藏教师相关统计
        } else if (roleId === "2") { // 教师角色
            $('.stat-card:nth-child(3)').hide(); // 隐藏管理员相关统计
        }
    }

    function loadMenus(roleId) {
        $.ajax({
            url: `/sysMenu/byRole/${roleId}`,
            type: 'GET',
            success: function (menus) {
                let html = '';
                menus.forEach(menu => {
                    html += `
                        <div class="card" onclick="goTo('${menu.menuUrl}')">
                            <h3><i class="bi ${menu.icon || 'bi-app'}"></i> ${menu.menuName}</h3>
                            <p>${menu.remark || '点击进入功能页面'}</p>
                        </div>`;
                });
                $('#menuGrid').html(html);
            },
            error: function () {
                $('#menuGrid').html('<div class="card"><h3>菜单加载失败</h3><p>请刷新页面或联系管理员</p></div>');
            }
        });
    }

    function loadStatistics(roleId) {
        // 模拟从后端获取数据
        $.ajax({
            url: `/dashboard/stats?role=${roleId}`,
            type: 'GET',
            success: function (data) {
                $('#studentCount').text(data.studentCount.toLocaleString());
                $('#attendanceRate').text(data.attendanceRate + '%');
                $('#pendingTasks').text(data.pendingTasks);
                $('#upcomingEvents').text(data.upcomingEvents);
            },
            error: function () {
                console.log('统计数据加载失败');
            }
        });
    }

    function goTo(url) {
        window.location.href = url;
    }

    // 新增学生相关函数
    function showAddStudentModal() {
        $('#addStudentModal').show();
        $('#studentForm')[0].reset();
    }

    function closeModal() {
        $('#addStudentModal').hide();
    }

    function submitStudentForm() {
        const formData = {
            studentNo: $('#studentNo').val(),
            studentName: $('#studentName').val(),
            gender: $('#gender').val(),
            className: $('#className').val(),
            phone: $('#phone').val(),
            address: $('#address').val()
        };

        // 简单表单验证
        if (!formData.studentNo || !formData.studentName || !formData.gender || !formData.className) {
            alert('请填写所有必填字段');
            return;
        }

        $.ajax({
            url: '/student',
            type: 'POST',
            contentType: 'application/json', // 确保设置内容类型
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            data: JSON.stringify(formData),
            success: function(response) {
                if (response) {
                    alert('学生添加成功');
                    closeModal();
                    // 刷新学生总数统计
                    loadStatistics(localStorage.getItem('roleId'));
                } else {
                    alert('添加失败，请重试');
                }
            },
            error: function(xhr, status, error) {
                if (xhr.status === 405) {
                    alert('请求方法不被允许，请联系管理员');
                } else {
                    alert('请求失败: ' + error);
                }
                console.error('Error:', error);
            }
        });
    }

    // 点击模态框外部关闭模态框
    window.onclick = function(event) {
        const modal = document.getElementById('addStudentModal');
        if (event.target === modal) {
            closeModal();
        }
    }
</script>

</body>
</html>